<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>渐变</title>
</head>
<body>
<div class="a">线性渐变-从上到下的渐变</div>
<div class="b">线性渐变-从左到右</div>
<div class="c">线性渐变-对角</div>
<div class="d">线性渐变-角度</div>
<div class="e">线性渐变-从上到下-多颜色节点</div>
<div class="f">线性渐变-彩虹色</div>
<div class="g">线性渐变-透明度</div>
<div class="h">线性渐变-重复性</div>
<div class="i">线性渐变-径向渐变</div>
<div class="j">径向渐变 - 颜色节点不均匀分布</div>
<div class="k">带有不同尺寸大小关键字的径向渐变</div>
<div class="l">带有不同尺寸大小关键字的径向渐变</div>
<div class="m">重复的径向渐变</div>

<style>
    .m{
        background-image: repeating-radial-gradient(red,yellow 10%,green 15%);
    }
    .l{
        background-image: radial-gradient(farthest-side at 60% 55%,red,yellow,black);
    }
    .k{
        background-image: radial-gradient(closest-side at 60% 55%,red,yellow,black);
    }
    .j{
        background-image: radial-gradient(red 5%,yellow 15%,green 60%);
    }
    .i{
        background-image: radial-gradient(red,yellow,green);
    }
    .h{
        background-image:repeating-linear-gradient(red,yellow 10%,green 20%);
    }
    .g{
        background-image: linear-gradient(to right,rgba(255,0,0,0),rgba(255,0,0,1));
    }
    .f{
        background-image: linear-gradient(to right,red,orange,yellow,green,blue,indigo,violet);
    }
    .e{
        background-image: linear-gradient(green,black,red);
    }
    div{
        padding: 200px;
        text-align: center;
    }
    .a{
        background-image: linear-gradient(red,yellow);
    }
    .b{
        background-image: linear-gradient(to right,white,black);
    }
    .c{
        background-image: linear-gradient(to bottom right,blue ,greenyellow);
    }
    .d{
        background-image: linear-gradient(-90deg,yellow,green);
    }
</style>
</body>
</html>